<template>
  <view class="vote-list">
    <block v-if="list.length > 0">
    <view class="vote-item" v-for="item in list" :key="item.voteId" @click="handleVote(item,type)">
      <u-image 
       radius="8rpx"
        width="200rpx" height="200rpx" class="vote-img" 
        :src="item.votePicture?item.votePicture:getImg('xcx_logo.svg')" mode="aspectFill" />
      <view class="vote-content">
        <view class="vote-title u-line-2">{{ item.voteTitle }}</view>
        <view class="vote-status">
          <text :class="['status-tag', getVoteStatus(item).statusClass]">{{ getVoteStatus(item).statusText }}</text>
        </view>
        <view class="vote-time">开始时间：{{ item.startDate }}</view>
        <view class="vote-time">结束时间：{{ item.endDate }}</view>
      </view>
    </view>
    	<u-loadmore 
       v-if="isLoadmore"
				:status="status"
				:loadmoreText="loadmoreText"
				:nomoreText="nomoreText"
				:loadingText="loadingText"
				dashed
				line
    />
        </block>
        <block v-else>
         <u-empty
              mode="data"
              :text="EmptyText"
              
      />
        </block>
  </view>
</template>

<script>
import ls from '@/util/ls'
import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
   import CommunityMixin from '@/mixins/CommunityMixin'
export default {
  name: 'VoteList',
 mixins: [CommunityMixin],
  props: {
    list: {
      type: Array,
      default: () => []
    },
    status: {
      type: String,
      default: 'loadmore'
    },
    type: {
      type: Number,
      default: 0
    },
    isLoadmore: {
      type: Boolean,
      default: true
    }
  },
  computed:{
    // ...mapState("community",["communityId"]),
    EmptyText(){
        if(this.type==1){
            return "暂无业主大会投票"
        }else if(this.type==2){
            return "暂无快速决议"
        }else if(this.type==3){
            return "暂无问卷调查"
        }else if(this.type==4){ 
            return "暂无倡议书"
        }
    }
    // ...mapState("user",["wxUser"])
  },
  data(){
    return {
      loadmoreText: '轻轻上拉',
      nomoreText: '已经到底了',
      loadingText: '努力加载中',
      user:ls.get("user")
    }
  },
  methods: {
    // handleVote(item){
      
    //   ls.set("voteInfo",item)
    //   if(this.type==2){
    //      uni.navigateTo({
    //       url: `/pages/quickresolution/index?voteId=${item.voteId}&communityId=${this.communityId}&wxUserId=${this.user.wxUser.wxUserId}`
    //     })
    //   }else  if(this.type==3){
    //     uni.navigateTo({
    //       url: `/pages/questionnaire/index?voteId=${item.voteId}&communityId=${this.communityId}&wxUserId=${this.user.wxUser.wxUserId}`
    //     })
    //   }else if(this.type==4){
    //     uni.navigateTo({
    //       url: `/pages/initiative/index?voteId=${item.voteId}&communityId=${this.communityId}&wxUserId=${this.user.wxUser.wxUserId}`
    //     })
    //   }else{
    
    //     uni.navigateTo({
    //       url: `/pages/votingForm/index?voteId=${item.voteId}&communityId=${this.communityId}&wxUserId=${this.user.wxUser.wxUserId}`
    //     })
   
    //   }
      
    // },
    getVoteStatus(item) {
      if (!item || !item.startDate) {
        return {
          statusText: '未知',
          statusClass: 'status-end'
        };
      }
      const now = new Date().getTime();
      const start = new Date(item.startDate.replace(/-/g, '/')).getTime();
      const end = new Date(item.endDate.replace(/-/g, '/')).getTime();

      if (now < start) {
        return {
          statusText: '未开始',
          statusClass: 'status-notstart'
        };
      } else if (now >= start && now <= end) {
        return {
          statusText: '进行中',
          statusClass: 'status-doing'
        };
      } else {
        return {
          statusText: '已结束',
          statusClass: 'status-end'
        };
      }
    }
  }
}
</script>

<style scoped>
.vote-list {
  
  
}
.vote-item {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.04);
  overflow: hidden;
  padding: 30rpx;
}
.vote-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.vote-content {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.vote-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
}
.vote-status {
  align-self: flex-start;
}
.status-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  font-weight: 500;
}
.status-notstart {
  color: #027AFF;
  background: rgba(2, 122, 255, 0.1);
}
.status-doing {
  color: #15D662;
  background: rgba(21, 214, 98, 0.1);
}
.status-end {
  color: #F72424;
  background: rgba(247, 36, 36, 0.1);
}
.vote-time {
  font-size: 24rpx;
  color: #999;
}
</style>
